<template>
    <div>
        <!-- 个人资料 -->
        <div>
            <span>姓名：</span>
            <el-input v-model="input" placeholder="联系人姓名"></el-input>
            <span>手机号：</span>
            <el-input v-model="input" placeholder="联系人手机号查询"></el-input>
            <span>大客户行业：</span>
            <el-input v-model="input" placeholder="建筑业"></el-input>
            <span>单位：</span>
            <el-input v-model="input" placeholder="单位查询"></el-input>
        </div>
        <!-- 地址 -->
        <div>
            <span>请选择省：</span>
            <el-select v-model="value" placeholder="全部省份">
                <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
            <span>请选择市：</span>
            <el-select v-model="value" placeholder="全部市">
                <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
            <span>请选择区：</span>
            <el-select v-model="value" placeholder="全部区">
                <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
        </div>
        <!-- 会员等级 -->
        <div id="test">
            <el-button type="primary" >+添加大客户专员</el-button>
            <span>大客户专员：</span>
            <el-radio v-model="radio" label="1">大客户专员</el-radio>
            <el-radio v-model="radio" label="2">大客户所属下级</el-radio>
        </div>
        <!-- 会员资料 -->
        <div>
            <el-table
                :data="tableData"
                height="250"
                border
                style="width: 100%">
                <el-table-column
                    prop="ID"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="联系人"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="number1"
                    label="手机号">
                </el-table-column>
                 <el-table-column
                    prop="date"
                    label="开通时间"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="people"
                    label="代理人"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="number2"
                    label="联系电话"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="province"
                    label="省"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="city"
                    label="市"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="area"
                    label="区"
                    width="180">
                </el-table-column>
                 <el-table-column
                    prop="status"
                    label="账号状态"
                    width="180">
                    <el-switch
                     v-model="values"
                     active-color="#13ce66"
                     inactive-color="#ff4949">
                </el-switch>
                </el-table-column>
                 <el-table-column
                    prop="operate"
                    label="操作"
                    width="180">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style scoped>
    #test{
        font-size: 20px;
    }

</style>
<script>
export default {
    data() {
      return {
             values: '100',
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>
